<template>
  <div class="mod-datasource">
    <div style="background: #fff; width: 100%; padding: 15px">
      <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()"  size="small">
        <el-form-item label="订单号:">
          <el-input v-model.trim="dataForm.orderNo" placeholder="订单号" clearable class="inputWidth" onkeyup="value=value.replace(/[\u4E00-\u9FA5]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="日期:">
          <el-date-picker
                  v-model="date"
                  class="inputWidth"
                  type="daterange" :default-time="['00:00:00','23:59:59']"
                  value-format="yyyy-MM-dd"
                  clearable
                  start-placeholder="选择日期"
                  end-placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="审核状态:">
          <el-select v-model="dataForm.status" placeholder="全部" clearable>
            <el-option label="待审核" :value="0"></el-option>
            <el-option label="已通过" :value="1"></el-option>
            <el-option label="已驳回" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryReset()" size="small">重置</el-button>
          <el-button @click="getDataList()" type="primary" size="small">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-table
              ma
              v-loading="dataListLoading"
              :header-cell-style="{background: '#DBEDF6'}"
              :data="dataList"
              :height="tableHeight">
        <!--        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>-->
        <el-table-column prop="id" label="id" header-align="center" align="center"></el-table-column>
        <el-table-column prop="orderNo" label="订单号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="auditStatus" label="提现金额" header-align="center" align="center"></el-table-column>
        <el-table-column prop="tradeTime" label="日期" header-align="center" align="center" ></el-table-column>
        <el-table-column prop="auditStatus" min-width="100" label="审核状态" header-align="center" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.auditStatus === 0 ? '待审核' : scope.row.auditStatus === 1 ? '已通过' : '已驳回'}}</span>
            </template>
        </el-table-column>
        <el-table-column prop="state" min-width="100" label="状态" header-align="center" align="center">
            <template slot-scope="scope">
                <span>{{scope.row.status === 1 ? '已到账' : '未到账' }}</span>
            </template>
        </el-table-column>
<!--        <el-table-column label="操作" header-align="center" align="center" width="150">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button type="text" size="small" @click="checkInvoice(scope.row.orderNo)">查看详情</el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->
      </el-table>
<!--    <el-form :inline="true" size="small" style="margin-top: 10px">-->
<!--      <el-form-item label="可提现余额:">-->
<!--        {{ 10000 }}-->
<!--      </el-form-item>-->
<!--      <el-form-item>-->
<!--        <el-button type="primary" size="mini" @click="withdrawDeposit">提现</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->
      <el-pagination
              :current-page="page"
              :page-sizes="[10, 20, 50, 100]"
              :page-size="limit"
              :total="total"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="pageSizeChangeHandle"
              @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <el-dialog :visible.sync="isNoteShow" :close-on-click-modal="false" :close-on-press-escape="false" width="800px" title="申请提现">
        <el-form  @keyup.enter.native="getDataList()" label-width="200px">
          <el-form-item label="当前用户可用余额:">
            元
          </el-form-item>
          <el-form-item label="体现中金额:">
            元
          </el-form-item>
          <el-form-item label="选择提现方式:">
            <el-select v-model="dataNote">
              <el-option label="银行卡" value="shanghai"></el-option>
<!--              <el-option label="微信" value="beijing"></el-option>-->
<!--              <el-option label="支付宝" value="beijing"></el-option>-->
            </el-select>
          </el-form-item>
          <el-form-item label="账户信息:">
<!--            银行:-->
<!--            <p>户名:</p>-->
<!--            <p>账户:</p>-->
              <el-input v-model.trim="dataForm.yh" placeholder="银行" clearable class="inputWidth bankInput"></el-input>
            <el-input v-model.trim="dataForm.name" placeholder="户名" clearable class="inputWidth bankInput"></el-input>
              <el-input v-model.trim="dataForm.zh" placeholder="账户" clearable class="inputWidth bankInput"></el-input>
          </el-form-item>
          <el-form-item label="上传发票:">
            <el-upload
                    class="avatar-uploader"
                    action="https://jsonplaceholder.typicode.com/posts/"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="提现金额:">
            <el-input style="width: 300px" v-model.trim="dataForm.tx" ></el-input> 元
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
    <el-button @click="isNoteShow = false">取 消</el-button>
    <el-button type="primary" @click="isNoteShow = false">发 送</el-button>
  </span>
      </el-dialog>
    <el-dialog :visible.sync="isNoteCheck" :close-on-click-modal="false" :close-on-press-escape="false" width="800px" title="查看详情">
      <el-form  label-width="200px">
        <el-form-item label="提现方式:">
            {{ dataInfo.withdrawalType}}
        </el-form-item>
        <el-form-item label="提现银行:">
            {{ dataInfo.withdrawalBank  }}
        </el-form-item>
        <el-form-item label="提现金额:">
            {{ dataInfo.tradeAmount }}
        </el-form-item>
        <el-form-item label="银行账户名:">
            {{ dataInfo.accountName }}
        </el-form-item>
        <el-form-item label="银行卡号:">
            {{ dataInfo.withdrawalCard }}
        </el-form-item>
        <el-form-item label="发票:">
            <img v-if="imageUrl" :src="dataInfo.invoice" class="avatar">
        </el-form-item>
        <el-form-item label="手续费:">
            {{ dataInfo.serviceCharge }}
        </el-form-item>
        <el-form-item label="到账状态:">
            {{ dataInfo.status }}
        </el-form-item>
        <el-form-item label="审核状态:">
            {{ dataInfo.auditStatus }}
        </el-form-item>
        <el-form-item label="驳回原因:">
            {{ dataInfo.remarks }}
        </el-form-item>
      </el-form>
    </el-dialog>
    </div>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/finance/finance/withdrawalFinance',
        getDataListIsPage: true,
        deleteURL: '/devtools/datasource',
        deleteIsBatch: true
      },
      isNoteCheck: false,
      dataForm: {
        connName: '',
        dbType: ''
      },
      dataNote: '',
      tableHeight: null,
      isNoteShow: false,
      imageUrl: '',
      date: null,
      dataInfo: {}
    }
  },
  watch: {
    date (newVal, oldVal) {
      if (newVal == null) {
        this.dataForm.beginTradeTime = null
        this.dataForm.endTradeTime = null
      } else {
        this.dataForm.beginTradeTime = newVal[0]
        this.dataForm.endTradeTime = newVal[1]
      }
    }
  },
  created () {
    this.$nextTick(() => {
      this.tableHeight = document.documentElement.clientHeight - 310
    })
  },
  methods: {
    withdrawDeposit () {
      this.isNoteShow = !this.isNoteShow
      // this.$http.get('/devtools/datasource/test/' + id).then(({ data: res }) => {
      //   if (res.code !== 0) {
      //     return this.$message.error(res.msg)
      //   } else {
      //     return this.$message.success(res.data)
      //   }
      // }).catch(() => {})
    },
    checkInvoice (id) {
      if (id === '') {
        this.$message.error('暂无订单号无法查看详情')
        return
      }
      this.isNoteCheck = true
      this.$http.get('/finance/finance/getWithdrawalDetails/', {
        params: {
          orderNo: id
        }
      }).then(({ data: res }) => {
        if (res.code !== 0) {
          this.dataInfo = res.data
          this.$message.error(res.msg)
        } else {
          return this.$message.success(res.data)
        }
      }).catch(() => {})
    },
    handleAvatarSuccess (res, file) {
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    queryReset () {
      this.dataForm = {}
      this.date = null
    }
  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
<style scoped>

  .el-form-item{
    margin-bottom: 0;
  }
.bankInput{
  margin: 5px 0;
  display: block;
}
</style>
